<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../../../css/preview.css" />
		<title>人员详情</title>
		<style>
		html,body{background:#fff;}	
		.p-list{background:#fff;font-size: 14px;padding:10px 20px; position: relative;}
		.p-table{display: flex;}.p-table font{height:32px;line-height: 32px;}
		.p-table font:nth-child(1){width:18%;}
		.p-table font:nth-child(2){width:80%;padding-left: 2%;}
		.p-img{width: 66px;padding:2px;height: auto; position: absolute;right:8%;top:22%;border:1px solid #E5E5E5;}.p-img img{width:100%;height:auto;}
		.p-list,.p-tags{background:#fff;}.p-tags{border-bottom: 2px solid #E0E7EE;}
		.p-tags a{font-size: 14px;height:42px;color:#9AA0A7;line-height:36px;display: inline-block;margin:0 10px}.p-tags{padding:0 10px;}
		.p-tags a.active{color:#275EB1;}
		.p-tags a{position: relative;}.p-tags a.active::after{content: '';display: inline-block;height:2px;
		width: 80%;background-image:linear-gradient(to right,#ffffff, #275EB1);border-radius: 2px;left:10%;top:70%; position: absolute;}
        .p-content{padding:10px;background:#fff;}
		.table {
                border: 1px solid rgba(215, 215, 215, 1);
                color: #666;margin:10px 0;
				overflow: hidden;
            }

            .table th {
                background-repeat: repeat-x;
                height: 30px;
            }

            .table td,
            .table th {
                border: 1px solid #cad9ea;
                padding: 5px 10px ;font-size: 13px;
            }

            .table tr.alter {
                background-color: #f5fafe;
            }
			.table tr>td:nth-child(1){color: #7F7F7F;}
			.record{font-size: 12px;border:1px solid #ccc;}.p-cbox{width: 100%;}
			.record .r1{display: flex;background:#eee;padding:5px 10px;
			border-bottom: 1px dotted #ccc;}
			.record .r1 font:nth-child(1){width:60%;color: #275EB1;}
			.record .r1 font:nth-child(2){width:40%;text-align: right;color: #62625F;}
			.record font{display: block;}.record .r2{padding:5px 10px;
			}.record{margin-bottom:5px;}
			.record .r1 font:nth-child(1)::before,.record .r1 font:nth-child(2)::before{color: #7F7F7F;}
			.record .r1 font:nth-child(1)::before{content: '场站：';color: #275EB1;}
			.record .r1 font:nth-child(2)::before{content: '入场时间：';color: #62625F;}
			.record .r2 a{display: inline-block;height:100%; position: absolute;right:0;top:0;line-height: 32px;padding:0 20px;border-left: 1px solid #ccc;}
			.record .r2{position: relative;}.record .r2 a span{padding:3px 5px;background-color: #275EB1;color: #fff;border-radius: 2px;}
			.record .r2 div{width: 70%;color: #6F706C;}
			.yanse{color: #62625F;}
			.data_1,.data_2{
				display: flex;
				flex-wrap: wrap;
				justify-content:flex-start;
				align-items: center;
			}
			.data_1 div,.data_2 div{
				width: 30%;
				padding-bottom: 30%;
				position: relative;
				margin:0 1.65% 40px 1.65%;
			}
			.data_1 img,.data_2 img{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;border-radius:9px;
				top: 0;
			}
			.data_1 div>p,.data_2 div>p{
				position: absolute;text-overflow:ellipsis;overflow:hidden;
				text-align: center;white-space:nowrap;
				width: 100%;color: #333;
				display: block;
				top: 110%;left:0;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">人员详情</h1>
		</header>
		<div class="mui-content" id="page" v-cloak>
			<div class="mui-row p-list">
				<div class="p-table"><div style="font-weight: 800;font-size: 16px;line-height: 32px;">{{userInfo.compellation}}</div> <font color="#275EB1">{{userInfo.phone}}</font></div>
				<div class="p-table yanse"><font>证件类型</font> <font>{{userInfo.idCard | checkIdcard}}</font></div>
				<div class="p-table yanse"><font>证  件  号</font> <font>{{userInfo.idCard}}</font></div>
				<div class="p-table yanse"><font>单位名称</font> <font>{{userInfo.enterpriseName}}</font></div>
				<div class="p-img"><img src="../img/u202.png"></div>
			</div>
			<div class="mui-row p-tags">
				<a href="javascript:;" class="active" @click="showBox($event,'data_0')">学习成绩</a>
				<a href="javascript:;" @click="showBox($event,'data_1')">授权证书</a>
				<a href="javascript:;" @click="showBox($event,'data_2')">个人资质</a>
				<a href="javascript:;" @click="showBox($event,'data_3')">登记记录</a>
			</div>
			<div class="mui-row p-content">
				<div class="mui-row data_0">
					<div v-if="userScore.length<1"
					 style="width: 100%; text-align: center;line-height: 30px;height:30px;font-size: 14px;">{{loading?'加载中...':'暂无数据'}}</div>
					
					<table v-else width="100%" class="table">
						<tr><th width="40%">试卷名称</th><th>成绩</th><th>及格分</th><th>是否合格</th><th>总分</th></tr>
						<tr v-for="(ie,ix) in userScore"><td>{{ie.examName}}</td><td>{{ie.score}}</td><td>{{ie.passScore}}</td><td>
						<font color="green" v-if="ie.score>=ie.passScore">是</font>
						<font color="red" v-else>否</font>
						</td><td>{{ie.totalScore}}</td></tr>
						
					</table>
					
				</div>
				<div class="mui-row data_1" style="display: none;">
					<div v-if="authorization.length<1"
					 style="width: 100%; text-align: center;line-height: 30px;height:30px;font-size: 14px;">{{loading?'加载中...':'暂无数据'}}</div>
					 <div v-else v-for="(ie,ii) in authorization">
						<img v-if="getFileSuffix(ie.fileName)!='pdf'" :src="filePath+ie.fileId+'?userId='+token" data-preview-src="" data-preview-group="1" />
						<img v-else src="../img/ouy.jpeg" @click="open(ie)" />
						<p>{{sysPicture[ie.type]}}</p>
					</div>
				</div>
				<div class="mui-row data_2" style="display: none;">
					<div v-if="tbAppUserFileDTOS.length<1"
					 style="width: 100%; text-align: center;line-height: 30px;height:30px;font-size: 14px;">{{loading?'加载中...':'暂无数据'}}</div>
					 <div v-else v-for="(ie,ii) in tbAppUserFileDTOS">
							<img v-if="getFileSuffix(ie.fileName)!='pdf'" :src="filePath+ie.id+'?userId='+token" data-preview-src="" data-preview-group="1" />
							<img v-else src="../img/ouy.jpeg" @click="open(ie)" />
						<p>{{sysPicture[ie.type]}}</p>
					</div>
				</div>
				
				<div class="mui-row p-cbox data_3" style="display: none;">
					<div class="record" v-for="(ie,ii) in userInfo.projectAppUserDTOS">
						<div class="r1"><font>{{ie.stationName}}</font> <font>{{ie.approachTime?ie.approachTime.replace(/^\d{4}-(\d{2}-\d{2}\s+\d{2}\:\d{2})\:\d{2}/,'$1'):''}}</font></div>
						<div class="r2"><div>事由：{{ie.content}} </div><a v-if="!ie.departureTime" @click="registrationLeave(ie.appUserId,ie)" href="javascript:;"><span>确认离场</span></a></div>
					</div>
				</div>
			</div>
			
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../../../js/vue.js"></script>
		<script src="../js/mkeyplus.base.js"></script>
		<script src="../formal/js/api.js"></script>
		<script src="../../../js/mui.zoom.js"></script>
		<script src="../../../js/mui.previewimage.js"></script>
		<script>
			var htapi = new HTGlobal();
			htapi.apiKey = 'group';
			mui.init({});
			mui.previewImage();
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				var groupUser = JSON.parse(localStorage.getItem('groupUser'))
				page.listQuery.appUserId = self.appUserId;
				page.listQuery.enterpriseProjectId = self.enterpriseProjectId;
				page.ucid = self.ucid
				page.token = groupUser.id;
				page.pload()
			});
			var page = new Vue({
				el:'#page',
				data:{
					sysPicture:['','负责人授权书','特种作业证','身份证','体检报告','检验报告','驾驶证'],
					listQuery:{
						appUserId:'',
						enterpriseProjectId:''
					},
					userInfo:{},
					filePath:'',
					token:'',
					ucid:undefined,
					userScore:[],
					tbAppUserFileDTOS:[
					],
					authorization:[],
					loading:false
				},
				filters:{
					checkIdcard(str){
						return str>7?'身份证':'工作证';
					},
					ellipsis(value,num){
						return htapi.ellipsis(value,num)
					}
				},
				methods:{
					getFileSuffix(filename){
						/** 个人资质的文件后缀
						 * @method getFileSuffix
						 * @param {filename} 文件名
						 * @return {suffix} 后缀字符
						*/ 
					   return filename ? filename.replace(/.+?\.(\w{3,})$/ig,'$1') : ''
					},
					open: function(item) {
							var originalName = item.originalName
							var index = originalName.lastIndexOf(".");
							var ext = originalName.substr(index + 1).toLowerCase();
						
							if(ext=='pdf'){
								mui.openWindow({
									url:'../pdf/web/index.html',
									id:'../pdf/web/index.html',
									extras: {
										file:this.filePath+item.id+'?userId='+this.token
									}
								})
								return;
							}
					},
					imgload(imgid){
						$('.'+imgid).remove();
					},
					pload(){
						
						var Th = this
						Th.loading = true
						//获取成绩单列表
						htapi.fetch(Object.assign({pageSize:100},Th.listQuery),
						function(res){
							var data = res.data
							if(res.code =='0' && data){
								if(data.list){
									Th.$set(Th.$data,'userScore',data.list)
								}
							}
							Th.loading = false
						},false,'getUserScore')
						//获取授权书
						htapi.fetch(this.listQuery,
						function(res){
							var data = res.data || false
							if(res.code =='0' && data){
								if(data.fileId){
									Th.authorization.push(data)
								}
							}
						},false,'getAuthorizeFile')
						//获取个人资料
						htapi.apiUrl[htapi.apiKey].temporary = htapi.apiUrl[htapi.apiKey].getPersonalData+Th.ucid
						htapi.fetch({},
						function(res){
							console.log('res......',JSON.stringify(res));
							var code = res.code
							var data = res.data
							if(code=='0' && data){
								if(data.tbAppUserFileDTOS){
									var F = data.tbAppUserFileDTOS
									Th.tbAppUserFileDTOS = Th.tbAppUserFileDTOS.concat(F)
	
								}
							}
							delete htapi.apiUrl[htapi.apiKey].temporary
							
						},false,'temporary')
						
						
						htapi.fetch(this.listQuery,function(res){
							console.log(JSON.stringify(res));
							if(res.code=='0' && res.data){
								Th.$set(Th.$data,'userInfo',res.data)
								// Th.tbAppUserFileDTOS = Th.tbAppUserFileDTOS.concat(res.data.tbAppUserFileDTOS)
							}
						},'加载中','insiderAppUser','post')
						
						this.filePath = htapi.filePath;
					},
					showBox(ev,cna){
						$(ev.target).parent().find('a').removeClass('active');
						$(ev.target).addClass('active');
						$('.p-content .mui-row').hide();
						$('.p-content .'+cna).show();
					},
					registrationLeave(uId,row){
						mui.confirm('确定要离场吗', '提示', ['确定','取消'], function(e) {
							if(e.index == 0) {
								htapi.fetch({id:uId},function(res){
									console.log(JSON.stringify(res));
									if(res.msg) mui.toast(res.msg);
									if(res.code == '0') row.departureTime = true;
								},false,'registrationLeave','post')			
							} else {}
						})
					}
				}
			});	
		</script>
	</body>
</html>
